<template>
<div class="lists">
    <div class="list">
        <h4>点评详情</h4>
        <ul v-if="lists.length > 0 ? true : false">
            <li v-for="(item,index) of lists" :key="index">
                <div class="del" v-show="item.isDeleteReview" @click="handelDel(item,index)"></div>
                <div class="imgBox" v-show="item.reviewText == null ? true : false">
                    <VanImage
                    round
                    width="1rem"
                    height="1rem"
                    :src="item.reviewTypeImagUrl"
                    />
                </div>
                <div class="imgBox" v-show="item.reviewText != null ? true : false">
                    <VanImage
                    round
                    width="1rem"
                    height="1rem"
                    :src="item.teacherImage"
                    />
                </div>
                <div class="content">
                    <div class="name">
                        <span 
                            class="number"
                            v-show="item.type != 0 ? true : false" 
                            :class="item.score <= 0 ? 'colorRed' : '' ">
                            {{item.score}}&nbsp;&nbsp;
                        </span>
                        <span v-show="item.type == 0 ? true : false">{{item.teacherName}}</span>
                        <span v-show="item.type != 0 ? true : false">{{item.reviewTypeName}}</span>
                    </div>
                    <div class="time">
                        <span>{{item.creationTime}}</span>
                        &nbsp;&nbsp;
                        <span>
                            <span v-show="item.teacherId == teacherId ? false : true">{{item.teacherName}}</span> 
                            点评 
                            {{item.studentName}}
                        </span>
                    </div>  
                    <div class="text">{{item.reviewText}}</div>
                </div>
            </li>
        </ul>
        <div v-else>
            <Empty description="暂未点评" />
        </div>
    </div>
</div>
</template>

<script>
import { Image as VanImage,Toast,Empty } from 'vant';
import { setTimeout } from 'timers';
export default {
    name:'list',
    components:{
        VanImage,
        Empty
    },
    props:{
        lists:{
            type:Array
        }
    },
    computed:{
        teacherId(){
            return this.$store.state.user.teacherId
        }
    },
    methods:{
        handelDel(item,index){
            const params = {
                id:item.id,
                teacherId:item.teacherId
            }
            this.$store.dispatch('studentAppraise/DelStudentReview',params).then(res=>{
                Toast.success('删除成功');
                setTimeout(()=>{
                    this.$emit('handelGeData');
                },2000)
            })
        }
    }
}
</script>

<style lang="less" scoped>
.lists{
    padding:0 0.26rem;
    margin-top: 0.24rem;
    .list{
        background-color:#fff;
        border-radius:0.15rem;
        box-sizing: border-box;
        padding: 0 0.26rem 0.3rem;
        h4{
            height: 0.88rem;
            line-height:0.88rem;
            font-size: 0.28rem;
            color:#000;
            border-bottom: 0.01rem solid #f5f5f5;
        }
        ul{
            li{
                display: flex;
                margin-top:0.35rem;
                position: relative;
                .del{
                    width:0.54rem;
                    height:0.54rem;
                    background:url(../../images/scoreInfo3.png) center no-repeat;
                    background-size: cover;
                    position: absolute;
                    right:0;
                    top: 0.2rem;
                }
                .imgBox{
                    width: 1rem;
                    height:1rem;
                    img{
                        width:100%;
                        height:100%;
                        object-fit: cover;
                    }
                }
                .content{
                    flex:1;
                    margin-left: 0.2rem;
                    .name{
                        font-size: 0.26rem;
                        color: #000;
                        margin-top: 0.12rem;
                        .number{
                            color:#128FEF;
                        }
                        .colorRed{
                            color:#FF0000;
                        }
                    }
                    .time{
                        color:#999;
                        margin-top:0.12rem;
                        font-size:0.22rem;
                    }
                    .text{
                        color: #666;
                        font-size:0.24rem;
                        margin-top: 0.2rem;
                    }
                }
            }
        }
    }
}
</style>



